<template>
  <el-dialog :title="$t('collectionWorkbench.message')" :visible.sync="showState" :before-close="handleClose" :close-on-click-modal="false">
    <el-row v-if="msgData.length === 0">
      {{ $t('authModule.noData') }}
    </el-row>
    <el-row v-else>
      <el-badge v-for="(item, index) in msgData" :key="index" :is-dot="item.status && !item.read" @click="!item.read ? changeList([item.id], 1) : ''">
        <el-card>
          <h3 class="title">{{ item.title }}</h3><span class="time">{{ item['createTimeStr'] }}</span>
          <div>
            {{ $t('collectionWorkbench.orderNo') }}
            <span style="color: #4b97c8">{{ '   ' + item['orderNos'] + ' : ' }}</span>
            <span v-if="item['remindId'] === 1">{{ item['recallRemark'] }}</span>
            <span v-if="item['remindId'] === 2">{{ $t('collectionWorkbench.arrived') }}</span>
            <span v-if="item['remindId'] === 3">{{ $t('collectionWorkbench.maturity') }}</span>
            <span v-if="item['remindId'] === 4">{{ $t('collectionWorkbench.reallocate') }}</span>
          </div>
        </el-card>
      </el-badge>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="msgData.length === 0" :loading="deleteReadLoading" @click="deleteRead">{{ $t('collectionWorkbench.deleteRead') }}</el-button>
      <el-button type="primary" :disabled="msgData.length === 0" :loading="allReadLoading" @click="allRead">{{ $t('collectionWorkbench.allRead') }}</el-button>
      <el-button type="primary" @click="handleClose">{{ $t('collectionWorkbench.shutDown') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updateRemind } from '@/api/collection'
export default {
  name: 'MsgDialog',
  props: {
    msgShow: {
      type: Boolean,
      default: false
    },
    msgData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      deleteReadLoading: false,
      allReadLoading: false
    }
  },
  computed: {
    showState: {
      get: function() {
        return this.msgShow
      },
      set: function() {
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('change-dialog', false)
    },
    deleteRead() {
      const readList = []
      this.msgData.forEach((item) => {
        item['read'] ? readList.push(item['id']) : ''
      })
      this.changeList(readList, 0)
    },
    allRead() {
      const readList = []
      this.msgData.forEach((item) => {
        readList.push(item['id'])
      })
      this.changeList(readList, 1)
    },
    changeList(list, type) {
      const data = {
        ids: list,
        status: type,
        read: 1
      }
      if (list.length > 0) {
        updateRemind(data)
          .then(res => {
            if (res.success) {
              this.$emit('msg-view')
            } else {
              this.$message.error(res.message)
            }
          })
          .catch(err => {
            this.$message.error(err.message)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-badge{
  width: 100%;
  .el-card{
    margin-bottom: 10px;
    .title{
      color: #2c2c2c;
      font-weight: bolder;
      font-size: 20px;
      display: inline-block;
      margin: 0;
    }
    .time{
      margin-left: 20px;
    }
    div{
      padding-top: 10px;
    }
  }
}

</style>
